이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹의 새로운 소식

Rachel Andrew

게시일: 2025년 5월 20일

Google I/O 2025의 '웹의 새로운 기능' 키노트에서는 모든 기준선 공지사항과 올해 기준선에 포함된 일부 기능을 살펴봤습니다. 웹과 Baseline에 있어 멋진 한 해였습니다. 이 게시물에서는 언급된 모든 내용을 요약하고 자세한 내용을 확인할 수 있는 링크를 제공합니다.

웹 플랫폼 대시보드 및 웹 기능

2024년에는 웹 지형지물 데이터 세트를 사용하여 기준점의 모든 기능을 탐색할 수 있는 웹 플랫폼 대시보드의 초기 출시를 발표했습니다.

이제 플랫폼의 모든 지형지물이 매핑되어 웹 지형지물 데이터가 완성되었습니다. 매달 새로운 기능이 기준에 추가되면 데이터가 업데이트되고 이 모든 내용이 대시보드에 표시됩니다.

자체 기준 타겟을 찾는 데 도움이 되는 도구

영국 대행사 Clearleft와 같이 '널리 사용 가능한 기준점'의 이동 타겟을 브라우저 지원 정책의 기반으로 삼을 수도 있지만, 기준 연도를 기반으로 고정 타겟을 채택할 수도 있습니다. 이제 웹 지형지물 데이터와 함께 자체 사용자 데이터를 사용하여 최적의 타겟을 찾을 수 있습니다.

작년 I/O에서 RUMvision이 제품에 기준선을 구현할 것이라고 발표했으며 이제 이 통합이 적용되었습니다.

RUM 데이터를 사용하므로 전 세계 평균이 아닌 해당 데이터를 기반으로 채택할 기준 연도를 파악하는 데 도움이 됩니다. 또한 광범위한 기준점 사용이 적합한지 확인하는 데도 도움이 됩니다.

또한 Google 애널리틱스 데이터를 사용하여 새로운 Google 애널리틱스 기준치 검사기를 통해 각 기준치 타겟을 지원하는 사용자의 비율을 명확하게 확인할 수 있습니다.

백분율 지원이 포함된 기준 연도 목록입니다. — Google 애널리틱스 기준점 검사기의 출력입니다.

이는 실사용자 데이터를 기준점에 매핑하는 데 도움이 되는 점점 늘어나는 도구 중 일부에 불과합니다.

Web DX 커뮤니티 그룹은 최근 빌드 도구에서 타겟팅할 항목을 결정하는 데 도움이 되도록 다양한 기준 연도에 대한 지원을 보여주고 사이트에서 광범위하게 사용할 수 있는 Netlify 확장 프로그램을 출시했습니다. Cloudflare의 Observatory RUM 제품 및 Contentsquare와의 통합도 곧 제공될 예정입니다.

자체 도구와 데이터 통합

웹 지형지물 데이터는 개방되어 있으며 자체 통합에 사용할 수 있습니다. YouTube는 이를 더 쉽게 할 수 있도록 노력하고 있습니다.

웹 플랫폼 대시보드 API를 사용하거나 npm 패키지에서 웹 지형지물 데이터를 직접 사용합니다.

이제 W3C WebDX 커뮤니티 그룹의 baseline-browser-mapping 모듈을 사용하여 브라우저 버전을 기준 타겟에 매핑할 수 있습니다. 이 모듈은 서버 측 JavaScript 환경에서 사용하거나 저장소에서 매일 새로고침되는 JSON 또는 CSV 파일을 다운로드하여 사용할 수 있습니다.

이 데이터에는 핵심 기준 브라우저 세트뿐만 아니라 Samsung Internet, Opera, UC Browser, Android WebView와 같은 다운스트림 브라우저의 매핑도 포함됩니다.

기준 타겟에서 기능이 지원되는지 알아보기

이제 기준 정보는 대부분의 MDN 및 Can I Use 페이지에 있으며 웹 플랫폼 대시보드, web.dev 및 CSS 트릭 도움말에서도 확인할 수 있습니다. 하지만 이 모든 작업을 하려면 지원팀에 문의해야 합니다. 코딩할 때 IDE에 기준 정보가 표시되고 사용하는 다른 모든 도구의 일부로 표시되면 훨씬 더 유용할 것입니다.

이제 많은 주요 도구에 기준점 지원이 내장되거나 쉽게 통합됩니다.

`browserslist-config-baseline`

Babel 및 PostCSS와 같은 많은 도구는 browserslist를 사용하여 지원할 브라우저를 결정합니다.

Chrome팀은 WebDX CG 및 커뮤니티 회원과 협력하여 browserslist-config-baseline라는 새로운 도구를 출시했습니다. 이렇게 하면 널리 사용 가능 또는 기준 연도와 같은 기준 용어로 browserslist 타겟을 구성할 수 있습니다.

이를 통해 browserslist 타겟을 사용하는 모든 도구를 이제 기준을 기준으로 표현할 수 있습니다.

browserslist와 함께 기준 사용에서 자세히 알아보세요.

린터의 기준: ESLint 및 Stylelint

최근 린터 공간에서 CSS용 ESLint를 시작으로 몇 가지 새로운 도구를 사용하여 린터와 함께 기준선을 사용할 수 있게 되었습니다.

기준 ESLint에는 use-baseline 규칙이 있습니다. 이 값을 원하는 기준 타겟으로 설정할 수 있으며, 타겟보다 최신인 기능을 사용할 때는 경고가 표시됩니다. 이러한 경고를 해결하는 방법을 선택할 수 있습니다. 즉, 해당 기능을 프리미티브로 대체하거나 린터 경고를 억제할 수 있습니다. 이는 최신 기능을 안전하게 사용하고 있음을 알고 있는 경우(예: 점진적 개선)에 완전히 유효한 해결 방법입니다.

기본적으로 ESLint는 지원되지 않는 브라우저에서는 어차피 평가하지 않으므로 @supports 블록 내에 최신 기능이 사용되는 경우 경고하지 않습니다.

HTML 린팅이 필요한 경우 html-eslint라는 커뮤니티 플러그인도 있습니다.

Stylelint는 stylelint-plugin-use-baseline라는 플러그인을 공식적으로 지원합니다. 이 규칙은 CSS용 ESLint 규칙과 동일하게 작동하지만 Stylelint에서 실행됩니다.

많은 린터에는 IDE 플러그인도 있으므로 코딩하는 동안 물결 아래선을 통해 기준 상태에 관한 즉각적인 의견을 받을 수 있습니다.

기준 타겟 외부의 기능에 밑줄을 표시하는 VSCode에서 사용되는 ESLint 플러그인 — VSCode에서 사용되는 ESLint 플러그인입니다.

VS Code 및 JetBrains WebStorm의 기준점

많은 IDE는 오랫동안 편집기에서 기능 위로 마우스를 가져가 지원되는 브라우저 버전 목록을 확인하는 방법을 지원해 왔습니다.

하지만 이 기능을 실제로 안전하게 사용할 수 있는지 파악하기는 쉽지 않습니다. 목록에서 누락된 주요 브라우저가 있는지, 브라우저 버전이 얼마나 최신 버전인지 정신적으로 파싱해야 합니다.

이 문제를 해결하기 위해 YouTube는 수백만 명의 웹 개발자가 사용하는 가장 인기 있는 IDE인 VS Code와 협력하여 기준 데이터를 이러한 마우스 오버 카드에 직접 통합했습니다.

이제 기능 위로 마우스를 가져가면 기능이 기준으로 간주되는지 여부와 기간 또는 아직 완전히 구현하지 않은 주요 브라우저가 있는지 여부가 표시됩니다.

기준 상태를 보여주는 VSCode의 호버 카드 — VSCode 호버 카드 통합

지원되는 기능에는 CSS 속성, HTML 요소, HTML 속성이 포함됩니다. 이제 Visual Studio Code에서 기준선을 지원합니다에서 자세히 알아보세요.

이 통합을 통해 VS Code를 기반으로 하는 모든 IDE에서도 이러한 호버 카드의 이점을 누릴 수 있습니다.

또한 JetBrains에서 WebStorm JavaScript 및 TypeScript IDE에 마우스 오버 카드를 구현하고 있다고 발표할 수 있습니다.

웹이 그 어느 때보다 빠르게 개선되고 있습니다.

상호 운용 가능한 웹이 그 어느 때보다 빠르게 개선되고 있다는 사실을 활용하는 데 Baseline이 도움이 되기를 바랍니다.

웹 플랫폼 대시보드를 사용하면 2024년 Google I/O 이후 지난 12개월 동안 새로운 기준이 된 모든 기능을 확인할 수 있습니다.

또한 Interop 2025 프로젝트에 포함되어 있으므로 곧 새로운 기준으로 사용할 수 있을 것으로 확신할 수 있는 기능도 여러 가지 있습니다. 포함된 모든 기능에 관한 자세한 내용은 Interop2025: 웹 플랫폼 개선의 또 다른 한 해를 참고하세요.

세로 모드로 작성

Browser Support

이미 CSS writing-mode 속성의 sideways-rl 및 sideways-lr 값이 기준으로 새로 제공되는 기능이 되었습니다. 순전히 레이아웃 목적으로 세로 쓰기 모드를 사용하는 경우 측면 값을 사용해야 할 수 있습니다.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

앵커 위치 지정

Browser Support

Source

앵커 위치 지정이 Chrome 125에서 제공됩니다. 이를 통해 버튼으로 도움말을 열 때와 같이 요소의 위치를 앵커에 연결할 수 있습니다.

이제 Interop 2025에 포함되어 있으므로 올해 기준에 포함될 예정입니다.

Core Web Vitals: LCP 및 INP

LCP API

Browser Support

Source

Event Timing API (INP용)

Browser Support

Source

웹 바이탈을 사용하면 사이트의 실험 환경을 수치화하고 개선 기회를 파악할 수 있습니다. 웹 바이탈 이니셔티브는 환경을 간소화하고 사이트가 가장 중요한 측정항목인 Core Web Vitals에 집중할 수 있도록 지원하는 것을 목표로 합니다.

Interop 2025에는 브라우저 전반에서 LargestContentfulPaint API 및 Event Timing API를 구현하여 최대 콘텐츠 렌더링 시간 (LCP) 및 다음 페인트에 대한 상호작용 (INP) 측정항목이 포함됩니다.

`<details>` 요소 개선

<details> 요소 자체는 이미 기준점으로 광범위하게 제공됩니다. <details>를 사용한 공개 위젯을 더 유용하게 만드는 여러 기능이 있으므로 Interop 2025에 포함되었습니다.

<details> 요소에는 <details> 요소가 접히면 페이지에 표시되는 <summary> 요소가 포함됩니다. <summary> 외부에는 <details> 요소의 콘텐츠가 있으며 이는 사용자가 요약을 클릭할 때까지 숨겨져 있습니다.

Interop 2025 중에 상호 운용성을 높이는 작업 중 하나는 display 대신 content-visibility를 사용하여 콘텐츠를 숨기는 것입니다. 즉, 펼치지 않으면 콘텐츠가 전혀 렌더링되지 않습니다.

또한 Interop 2025 작업의 일부는 ::marker 가상 요소입니다. ::marker 가상 요소를 사용하면 <summary> 요소의 공개 삼각형에 스타일을 지정할 수 있습니다.

Browser Support

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

그런 다음 다른 가상 요소인 ::details-content가 나옵니다.

Browser Support

Source

::details-content는 콘텐츠를 나타냅니다. 콘텐츠는 세부정보 요소의 일부로 펼치고 접을 수 있으며 스타일을 지정할 수 있습니다.

[open]::details-content {
  border: 5px dashed hotpink;
}

페이지 내 검색 결과와 함께 <details> 요소를 자동으로 확장하고 HTML hidden 속성의 until-found 값을 새로 사용 가능한 기준으로 가져오는 등 몇 가지 유용한 개선사항도 있습니다. 이렇게 하면 브라우저의 페이지 내 검색을 사용하여 요소를 찾을 때까지 또는 URL 프래그먼트를 따라 요소로 직접 이동할 때까지 요소가 숨겨집니다.

CSS `@scope`

Browser Support

Source

CSS @scope 규칙을 사용하면 선택자의 도달범위를 제한할 수 있습니다. @scope로 범위 지정 루트를 설정하면 at-rule 내에 중첩된 모든 스타일 규칙이 해당 DOM 트리에만 적용됩니다.

예를 들어 클래스가 .card인 요소 내의 <img> 요소만 타겟팅하려면 .card가 범위 지정 루트가 됩니다.

@scope (.card) {
    img {
        border-color: green;
    }
}

CSS @scope at-rule로 선택자 도달 범위 제한에서 자세히 알아보세요.

`scrollend`

Browser Support

Source

복잡성을 줄이고 스크롤 인터페이스를 개선하는 또 다른 기능은 scrollend입니다. scrollend 이벤트가 없으면 스크롤이 완료되었음을 감지할 수 있는 신뢰할 수 있는 방법이 없습니다.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend 이벤트를 사용하면 브라우저가 이러한 어려운 평가를 모두 실행합니다.

document.onscrollend = event => {…}

새로운 JavaScript 이벤트인 Scrollend에서 더 많은 예를 확인하세요.

동일한 문서 보기 전환

Browser Support

Source

마지막으로 뷰 전환은 Interop 2025의 일부입니다. 이 작업에는 동일한 문서 뷰 전환이 포함되므로 싱글페이지 앱의 전환과 뷰 전환 클래스도 포함됩니다.

Interop 2025 대시보드에서 연도가 지남에 따라 프로젝트가 어떻게 진행되고 있는지 확인할 수 있습니다.

Interop 2025에 포함된 기능이 올해 기준에 포함되는 유일한 기능은 아니지만, 프로젝트에 포함되었다는 것은 이러한 기능이 우선순위에 있으며 곧 출시될 것이라는 좋은 신호입니다.

실험을 시작한 지 얼마 되지 않았습니다.

Baseline은 흥미로운 한 해를 보냈으며 작년 발표 이후 많은 발전을 이루었습니다. 이제 웹 지형지물 데이터의 백필이 완료되었습니다. 이를 통해 개발자 도구를 만들 수 있게 되었습니다. 아직 시작 단계에 불과하며 이 데이터를 포함하면 도움이 되는 제품이나 오픈소스 도구가 있다면 알려주시기 바랍니다.

web.dev에서 새로운 도구에 관한 공지사항과 웹의 모든 기능을 활용하는 데 도움이 되는 튜토리얼을 계속해서 확인하세요.

웹의 새로운 소식

웹 플랫폼 대시보드 및 웹 기능

자체 기준 타겟을 찾는 데 도움이 되는 도구

자체 도구와 데이터 통합

기준 타겟에서 기능이 지원되는지 알아보기

browserslist-config-baseline

린터의 기준: ESLint 및 Stylelint

VS Code 및 JetBrains WebStorm의 기준점

웹이 그 어느 때보다 빠르게 개선되고 있습니다.

세로 모드로 작성

앵커 위치 지정

Core Web Vitals: LCP 및 INP

LCP API

Event Timing API (INP용)

<details> 요소 개선

CSS @scope

scrollend

동일한 문서 보기 전환

실험을 시작한 지 얼마 되지 않았습니다.

`browserslist-config-baseline`

`<details>` 요소 개선

CSS `@scope`

`scrollend`